<template>
  <div class="search">
    <div class="container">
      <div class="corner">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <!-- <el-breadcrumb-item><a href="/bulletin-list">热点资讯</a></el-breadcrumb-item> -->
          <el-breadcrumb-item><a href="/bulletin-list">{{ title }}</a></el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="text-field">
        <div class="title-box">
          <div class="title">
            {{ bulletinDetail.bulletinTitle || bulletinDetail.newsTitle }}
          </div>
          <div class="time">
            {{ parseTime(bulletinDetail.createTime, "{y}-{m}-{d}") }}
          </div>
        </div>
        <div class="text-conent">
          <div class="text-name">
            {{
              bulletinDetail.bulletinIntroduct || bulletinDetail.newsIntroduct
            }}
          </div>

          <div
            class="content-box"
            v-html="
              bulletinDetail.bulletinContent || bulletinDetail.newsContent
            "
          />
        </div>
        <div class="botton-box">
          <div
            v-if="lastIndex > -1"
            @click="
              GoDetail(
                listBulletinData[lastIndex].id,
                listBulletinData[lastIndex].type
              )
            "
          >
            [上一篇]{{
              listBulletinData[lastIndex].bulletinIntroduct ||
                listBulletinData[lastIndex].newsIntroduct
            }}
          </div>
          <div
            v-if="listBulletinData.length - 1 >= nextIndex"
            @click="
              GoDetail(
                listBulletinData[nextIndex].id,
                listBulletinData[nextIndex].type
              )
            "
          >
            [下一篇]{{
              listBulletinData[nextIndex].bulletinIntroduct ||
                listBulletinData[nextIndex].newsIntroduct
            }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBulletin } from '@/api/web-site-announcement'
import { getNews } from '@/api/hot-consulting'
export default {
  data() {
    return {
      bulletinDetail: {},
      listBulletinData: [],
      nextIndex: null,
      lastIndex: null,
      title: ''
    }
  },
  watch: {
    $route() {
      this.judge()
    }
  },
  created() {
    this.judge()
  },
  methods: {
    judge() {
      if (this.$route.query.type == 0) {
        this.title = '网站公告'
        this.getBulletin()
        this.getListBulletin()
      }
      if (this.$route.query.type == 1) {
        this.title = '业内活动'
        this.getIndustryNews()
        this.getIndustryNewsData()
      }
      if (this.$route.query.type == 2) {
        this.title = '国家政策'
        this.getPolicyNews()
        this.getPolicyNewsData()
      }
      if (this.$route.query.type == 3) {
        this.title = '热点资讯'
        this.getNews()
        this.getNewsList()
      }
    },
    // 获取本地
    getLocal(name, type) {
      const data = JSON.parse(localStorage.getItem(name))
      data.forEach(e => {
        e.type = type
      })
      const index = data.findIndex(v => v.id == this.$route.query.id)
      this.listBulletinData = [...data]
      this.nextIndex = index + 1
      this.lastIndex = index - 1
    },
    // 获取公告详情
    getBulletin() {
      getBulletin(this.$route.query.id).then(res => {
        this.bulletinDetail = res.data
      })
    },

    // 获取公告本地数组
    getListBulletin() {
      this.getLocal('listBulletinData', 0)
    },
    // 获取资讯详情
    getNews() {
      getNews(this.$route.query.id).then(res => {
        this.bulletinDetail = res.data
      })
    },
    // 获取资讯本地数组
    getNewsList() {
      this.getLocal('listNewsData', 3)
    },
    // 获取业内活动详情
    getIndustryNews() {
      getNews(this.$route.query.id).then(res => {
        this.bulletinDetail = res.data
      })
    },
    // 获取业内活动本地数组
    getIndustryNewsData() {
      this.getLocal('industryNewsData', 1)
    },
    // 获取国家政策详情
    getPolicyNews() {
      getNews(this.$route.query.id).then(res => {
        this.bulletinDetail = res.data
      })
    },
    getPolicyNewsData() {
      this.getLocal('policyNewsData', 2)
    },
    GoDetail(id, type) {
      this.$router.replace({
        path: '/information-detail',
        query: {
          id,
          type
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  background: #f5f5f5;
  .container {
    .corner {
      height: 30px;
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #707070;
      ::v-deep .el-breadcrumb__inner a,
      .el-breadcrumb__inner.is-link {
        color: #707070;
        font-weight: normal;
      }
      ::v-deep .el-breadcrumb__inner.is-link {
        color: #707070;
        font-weight: normal;
      }
    }
    .text-field {
      padding: 60px 50px;
      background: #ffffff;
      margin-bottom: 60px;
      .title-box {
        border-bottom: 1px solid #e5e5e5;
        .title {
          color: #333333;
          font-size: 16px;
          font-weight: bold;
        }
        .time {
          color: #c7c7cc;
          font-size: 14px;
          margin: 15px 0 40px 0;
        }
      }
      .text-conent {
        margin-top: 45px;
        .text-name {
          color: #333333;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          line-height: 40px;
          margin-bottom: 30px;
        }

        .content-box {
          font-size: 14px;
          color: #333333;
          line-height: 44px;
        }
      }
      .botton-box {
        background: #fafafa;
        margin-top: 38px;
        padding: 50px 46px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        div {
          margin-bottom: 36px;
        }
        div:last-child {
          margin-bottom: 0;
        }
        div:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
